<template>
  <!--测试 防抖 emitRef @input="myinput"-->
  <el-input
    v-model="val"
    placeholder="测试 防抖 emitRef"
    clearable
    @blur="run"
    @change="run"
    @clear="run"
    @keydown="clear"
  ></el-input>
  ({{val}})
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import type { PropType } from 'vue'

  import modelDebRef from '../../../../lib/base/ref-model-debounce'

  interface Person {
    name: string
  }

  export default defineComponent({
    name: 'nf-base-deb-emit',
    props: {
      model: {
        type: Object as PropType<Person>,
        default: () => {
          return {
            name: '没有赋值'
          }
        }
      },
      colName: {
        type: String,
        default: 'name'
      }
    },
    setup(props, context) {

      const ctlEvents = {
        run: () => {}, // 立即执行，不防抖了
        clear: () => {} // 清除上一次计时，用于输入汉字的情况。
      }

      // 不防抖，立即提交
      const run = () => {
        ctlEvents.run() // 立即执行
      }
      // 输入汉字的情况
      const clear = (e: any) => {
        if (e.key !== 'Backspace') {
          ctlEvents.clear() // 输入汉字时清除上次计时
        }
      }
     
      const val = modelDebRef(props.model, 'name', ctlEvents)
      // const val = modelDebRef(props.model, props.colName, ctlEvents, context.emit)

      return {
        val,
        run,
        clear
      }
    }
  })
</script>